import React, { Component } from "react";
import "./header.css";
import checkTitle from "../../utils/checkTitleUtils";
import { reqClimate } from "../../api/index";
import { getTime } from "../../utils/dataUtils";
import { withRouter } from "react-router-dom";
import { Modal } from "antd";
import StorageUtils from "../../utils/localStorageUtils";
import memory from "../../utils/memory";
import LinkButton from "../../component/LinkButton";

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      climateMsg: {
        city: "",
        today: "",
        wd: "",
        weather: "",
      },
      time: "",
      visible: false,
    };
  }

  componentDidMount() {
    reqClimate().then((res) => {
      this.setState({
        climateMsg: {
          city: res.data.city,
          today: res.data.today,
          wd: res.data.wd,
          weather: res.data.weather,
        },
      });
    });
    this.interval = setInterval(() => {
      const time = getTime(Date.now());
      this.setState({ time });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
  getTitle(pathname) {
    return checkTitle(pathname);
  }
  handleLoginOut = (e) => {
    console.log("out");
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    StorageUtils.removeUser();
    memory.user = {};
    this.props.history.replace("/login");
  };

  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const title = this.getTitle(this.props.location.pathname);
    const { today, city, wd, weather } = this.state.climateMsg;
    return (
      <div className="header">
        <Modal
          title="警告!"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okText="确定"
          cancelText="取消"
        >
          <h1>您是否要退出登录</h1>
        </Modal>
        <div className="header-top">
          {/* <a href="#" onClick={this.handleLoginOut}>
            退出
          </a> */}

          <div className="wrapper">
            <span>欢迎，admin</span>
            <LinkButton onClick={this.handleLoginOut} className="link-button">
              退出
            </LinkButton>
          </div>
        </div>
        <div className="header-bottom">
          <span className="header-bottom-title">{title}</span>
          <span className="header-bottom-climate">
            {city}-{today}-{this.state.time}-{wd}-{weather}
          </span>
        </div>
        <div className="block"></div>
      </div>
    );
  }
}
export default withRouter(Header);
